<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
		append()       功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()      功能：在匹配元素集合中所有元素的内部开头插入内容
		
		
		after()        功能：在匹配元素集合中所有元素的外部后面插入内容
		before()       功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()       功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		empty()        功能：清空匹配元素集合中所有的元素的内容【盒子模型不删掉】
		
		replaceWith()
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			#target{
				border: 1px solid red;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
				margin-left: 5px;
			}
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			.add1{
				width:300px;
				height:300px;
				border:5px solid red;
				border-radius:50%;
				background-color:#55ffff;
				background:url(../img/1.gif);
				background-size:100% 100%;
				color:transparent;
				display: block;
			}
		</style>
	</head>
	<body>
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 -->
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入跟替换的区域 -->
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
		</div>
		<script>
			/* 1.点击 内部末尾插入元素 按钮  p文本后面追加新元素中包含内容操作 */
			$("#appendBtn").click(function(){
				// 效果：点击按钮 追加新"元素--自带内容"
				// 1.1 追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
			var	cpe= $("#newElement").clone();
				// clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				// 1.2 自带属性和属性值：隐藏--改成显示
				cpe.css("display","block");
				// 1.3 将赋值出来的新元素，追加给当前元素上
				$("#target").append(cpe);
			});
			
			/* 2.点击 内部开头插入元素 按钮  p文本后面追加新元素中包含内容操作 */
			$("#prependBtn").click(function(){
			var cpe2=$("#newElement").clone();
			cpe2.css("display","block");
			$("#target").prepend(cpe2);
			});
			
			/* 3.点击 外部后面插入元素 按钮  p文本后面追加新元素中包含内容操作 */
			$("#afterBtn").click(function(){
			var cpe3=$("#newElement").clone();
			cpe3.addClass("add1");
			$("#target").after(cpe3);
			});
			
			
			/* 4.点击 外部前面插入元素 按钮  生成 圆形 保留背景色 文本不需要
			                                背景图300*300*/
			$("#beforeBtn").click(function(){
				var cpe4=$("#newElement").clone();
				cpe4.css({"display":"block",
				          "width":"300px",
						  "height":"300px",
						  "border":"5px solid red",
						  "border-radius":"50%",
						  "background-color":"#55ffff",
						  "background":"url(../img/1.gif)",
						  "background-size":"100% 100%",
						  "color":"transparent"
						  });
				$("#target").before(cpe4);
			});	
										
	        // 5.点击 删除元素 按钮 页面上所有元素包括子元素前部删除【盒子模型也删】
	        $("#removeBtn").click(function(){
	        $("#target").remove();
	        });
			
			
	        // 6.点击 清空元素 按钮 页面上所有元素中内容全部删除【盒子模型不删】
	        $("#emptyBtn").click(function(){
	    	$("#target").empty();
	        });
			
			/* 7.点击 替换元素 按钮  页面上目标元素替换为新元素 */
			$("#replaceBtn").click(function(){
				// 克隆 新元素【具有父子级】 #newElement
			var c=$("#newElement").clone().css("display","block");
				// 替换 新元素 替换 目标元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>